/*
 * @Description:
 * @Author: mtt
 * @Date: 2023-07-16 18:21:24
 * @LastEditTime: 2023-07-16 19:12:38
 * @LastEditors: mtt
 * @Reference:
 * @FilePath: \react-my-website-master\src\page\home\components\setting\fileter.js
 */
import React from 'react'
import Select from '@c/select'
import { bg } from './bg'

/**
 * @name filter选择组件
 */

const bod = document.body
const listFn = (c, n) => {

  if(c === '星空'){
    console.log('11',document.getElementById('canvas'));
    document.getElementById('canvas').style.display = 'block'
    // document.getElementById('footer').childNodes.forEach(ele=>ele.style.color = '#fff')
    bg()
  }else{
    document.getElementById('canvas').style.display = 'none'
    bod.className = c;
    bod.setAttribute('fileter', n)
  }

}
const lists = [
  { value: '默认', fn: () => { listFn('', 'none') } },
  { value: '反转色调', fn: () => { listFn('hue-rotate', 'hue rotate') } },
  { value: '底片色系', fn: () => { listFn('negative', 'negative') } },
  { value: '黑白相间', fn: () => { listFn('black-white', 'black and white') } },
  { value: '星空', fn: () => { listFn('星空', '') } }
]
const redux = () => {
  return bod.getAttribute('fileter')
}
export default () => {
  return (
    <Select lists={lists} redux={redux} />
  )
}
